<script setup lang="ts">

import { computed } from 'vue'

export interface GoodsInfoProps {
  // 商品图片
  goods_img?: string;
  //
  goods_name?: string;
  // 货号
  outer_goods_code?: string;
  // 商品标题
  outer_goods_name?: string;

  showSkuCode?: boolean;

  // 商家编码(供应链)
  outer_goods_sku_code?: string;
  // 规格(供应链)
  outer_goods_difference?: string;

  // 商家编码(商户, 优先)
  new_sku_code?: string;
  // 商家编码(商户)
  sku_code?: string;
  // 规格(商户)
  goods_spec?: string;

  // 角色
  role?: 'merchant' | 'supply_chain'
}

const props = withDefaults(defineProps<GoodsInfoProps>(), {
  showSkuCode: true
})

const skuCode = computed(() => {
  if (props.role === 'merchant')
    return props.new_sku_code || props.sku_code
  return props.outer_goods_sku_code
})

const goodsSpec = computed(() => {
  return props.role === 'merchant' ? props.goods_spec : props.outer_goods_difference
})

</script>

<template>
  <div class="flex w-full overflow-hidden mt-2 first:mt-0">
    <div class="block w-[70px] h-[70px] mr-1 flex-shrink-0 flex-grow-0">
      <AImage :src="props?.goods_img"></AImage>
    </div>
    <div class="flex flex-col justify-between overflow-hidden text-xs">
      <div class="text-ellipsis overflow-hidden text-nowrap">{{ props.outer_goods_name || props.goods_name }}</div>
      <div class="text-ellipsis overflow-hidden text-nowrap">货号: {{ props.outer_goods_code }}</div>
      <div class="text-ellipsis overflow-hidden text-nowrap" v-if="showSkuCode">商家编码: {{ skuCode }}</div>
      <div class="text-ellipsis overflow-hidden text-nowrap">规格: {{ goodsSpec }}</div>
    </div>
  </div>
</template>